<div id="app" v-cloak>
    <el-tabs tab-position="left">
        <el-tab-pane label="主题颜色">
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <span>主要颜色</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="5">
                        <div class="bg-success" style="border-radius: 4px;padding: 20px;color: #ffffff">Success
                            <div class="value">#67C23A</div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="bg-warning" style="border-radius: 4px;padding: 20px;color: #ffffff">Warning
                            <div class="value">#E6A23C</div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="bg-danger" style="border-radius: 4px;padding: 20px;color: #ffffff">Danger
                            <div class="value">#F56C6C</div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="bg-info" style="border-radius: 4px;padding: 20px;color: #ffffff">Info
                            <div class="value">#909399</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <span>中性色</span>
                </div>
                <el-row>
                    <el-col :span="5">
                        <div>
                            <div class="bg-text-primary"
                                 style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #303133">
                                主要文字
                                <div class="value">#303133</div>
                            </div>
                            <div class="bg-text-regular"
                                 style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #606266">
                                常规文字
                                <div class="value">#606266</div>
                            </div>
                            <div class="bg-text-secondary"
                                 style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #909399">
                                次要文字
                                <div class="value">#909399</div>
                            </div>
                            <div class="bg-text-placeholder"
                                 style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #C0C4CC">
                                占位文字
                                <div class="value">#C0C4CC</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div style="width: 20px;height: 10px"></div>
                    </el-col>
                    <el-col :span="5">
                        <div>
                            <div class="bg-border-base"
                                 style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">一级边框
                                <div class="value">#DCDFE6</div>
                            </div>
                            <div class="bg-border-light"
                                 style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">二级边框
                                <div class="value">#E4E7ED</div>
                            </div>
                            <div class="bg-border-lighter"
                                 style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">三级边框
                                <div class="value">#EBEEF5</div>
                            </div>
                            <div class="bg-border-extra-light"
                                 style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">四级边框
                                <div class="value">#F2F6FC</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-tab-pane>

        <el-tab-pane label="介绍说明">

            <h4>主要框架</h4>

            <ol style="line-height: 40px;padding-left: 20px;" type="1">
                <li>
                    <el-tag>SpringBoot v2.1.2.RELEASE</el-tag>
                </li>
                <li>
                    <el-tag>Ehcache v-2.6.11</el-tag> 缓存框架
                </li>
                <li>
                    <el-tag>Freemarker v2.1.2.RELEASE</el-tag>
                    Html模板引擎
                </li>
                <li>
                    <el-tag>pagehelper v1.2.5</el-tag>
                    分页插件、提供便捷的分页功能
                </li>
                <li>
                    <el-tag>dozer v5.5.1</el-tag>
                    对象复制拷贝
                </li>
                <li>
                    <el-tag>logback v1.2.3</el-tag>
                    日志框架
                </li>
                <li>
                    <el-tag>easyexcel 2.2.6</el-tag>
                    EasyExcel是一个基于Java的简单、省内存的读写Excel的开源项目。在尽可能节约内存的情况下支持读写百M的Excel。
                </li>
                <li>
                    <el-tag>jQuery v3.2.1</el-tag>
                    前端JavaScript框架（保留），打包进base.min.js，但请尽量勿使用jQuery直接操作Dom
                </li>
                <li>
                    <el-tag>Vue v2.5.17</el-tag>
                    DOM渲染引擎
                </li>
                <li>
                    <el-tag>ElementUI v2.8.2</el-tag>
                    前端UI框架，提供统一风格控件
                </li>
                <li>
                    <el-tag>Maven</el-tag>
                    后端构建管理工具
                </li>
                <li>
                    <el-tag>JDK 8+</el-tag>
                    SpringBoot2.x开始不再支持JDK 7及以下，所以请将JDk升级到8+
                </li>
            </ol>

            <h4></h4>
        </el-tab-pane>

        <el-tab-pane label="Freemarker">
            <el-card class="card" style="width: 600px;margin: 20px">

                <div slot="header">
                    <span>占位输出</span>
                </div>

                <p>正常输出
                    <el-tag>${r'${hello}'}</el-tag>
                </p>

                <p>输出带默认值
                    <el-tag>${r'${hello?default("默认")}'}</el-tag>
                </p>

                <p>HTML输出
                    <el-tag>${r"${'&lta>a标签&lt/a>'?html}"}</el-tag>
                </p>

                <p>$表达式
                    <el-tag>${r"${r'${hello}'}"}</el-tag>
                </p>

                <p>布尔值输出
                    <el-tag>${r"${true?c}"}</el-tag>
                </p>

                <p>三元表达式
                    <el-tag>${r"${true?string('yes','no')}"}</el-tag>
                </p>

                <p>输出当前日期
                    <el-tag>${r'${.now?string["yyyy-MM-dd HH:mm:ss"]}'}</el-tag>
                </p>

            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">

                <div slot="header">
                    <span>条件输出</span>
                </div>

                <p>${'<#if status == 0>'}</p>

                <p class="text-indent">status is 0</p>

                <p>${'<#elseif status ==1>'}</p>

                <p class="text-indent">status = 1</p>

                <p>${'<#else>'}</p>

                <p class="text-indent">status != 0 && status !=1</p>

                <p>${'&lt/#if>'}</p>

            </el-card>


            <el-card class="card" style="width: 600px;margin: 20px">

                <div slot="header">
                    <span>遍历集合</span>
                </div>

                <p>${'<#list citys as city>'}</p>

                <p class="text-indent">${r' ${city_index} --> ${city}'}</p>

                <p>${'&lt/#list>'}</p>

            </el-card>

        </el-tab-pane>

        <el-tab-pane label="UI常用组件">
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>1、表单控件集合及验证</h3>
                </div>

                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                    <el-form-item label="活动名称" prop="field1">
                        <el-input v-model="form.field1" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" prop="field2">
                        <el-select v-model="form.field2" placeholder="请选择活动区域" size="mini">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间" required>
                        <el-col :span="11">
                            <el-form-item prop="field3">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.field3" size="mini"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col style="text-align: center" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="field4">
                                <el-time-picker placeholder="选择时间" v-model="form.field4" size="mini"
                                                style="width: 100%;"></el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="即时配送" prop="field5">
                        <el-switch v-model="form.field5" size="mini"></el-switch>
                    </el-form-item>
                    <el-form-item label="活动性质" prop="field6">
                        <el-checkbox-group v-model="form.field6" size="mini">
                            <el-checkbox label="美食/餐厅线上活动" name="field6"></el-checkbox>
                            <el-checkbox label="地推活动" name="field6"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="field6"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="field6"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特殊资源" prop="field7">
                        <el-radio-group v-model="form.field7" size="mini">
                            <el-radio label="线上品牌商赞助"></el-radio>
                            <el-radio label="线下场地免费"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="购买数量" prop="field8">
                        <el-input-number v-model="form.field8" :min="1" :max="10" label="描述文字" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="地址" prop="field9">
                        <el-cascader
                                :options="address"
                                v-model="form.field9"
                                size="mini">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="活动形式" prop="field10">
                        <el-input type="textarea" v-model="form.field10" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色选择" prop="field11">
                        <el-color-picker></el-color-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form')" size="mini">立即创建</el-button>
                        <el-button @click="resetForm('form')" size="mini">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-card>
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>2、表格数据</h3>
                </div>

                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        :default-sort="{prop: 'date', order: 'descending'}"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="100">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="100">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>3、分页</h3>
                </div>

                <el-pagination
                        background
                        layout="prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>

            </el-card>

            <el-card class="card" style="width: 700px;margin: 20px">
                <div slot="header">
                    <h3>4、按钮</h3>
                </div>

                <el-row style="margin-bottom: 10px;">
                    <el-button>默认按钮</el-button>
                    <el-button type="primary">主要按钮</el-button>
                    <el-button type="success">成功按钮</el-button>
                    <el-button type="info">信息按钮</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger">危险按钮</el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button plain>朴素按钮</el-button>
                    <el-button type="primary" plain>主要按钮</el-button>
                    <el-button type="success" plain>成功按钮</el-button>
                    <el-button type="info" plain>信息按钮</el-button>
                    <el-button type="warning" plain>警告按钮</el-button>
                    <el-button type="danger" plain>危险按钮</el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button round>圆角按钮</el-button>
                    <el-button type="primary" round>主要按钮</el-button>
                    <el-button type="success" round>成功按钮</el-button>
                    <el-button type="info" round>信息按钮</el-button>
                    <el-button type="warning" round>警告按钮</el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button type="danger" round>危险按钮</el-button>
                    <el-button type="primary" :loading="true">加载中</el-button>
                    <el-button icon="el-icon-search" circle></el-button>
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="success" icon="el-icon-check" circle></el-button>
                    <el-button type="info" icon="el-icon-message" circle></el-button>
                    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button disabled>默认按钮</el-button>
                    <el-button type="primary" disabled>主要按钮</el-button>
                    <el-button type="success" disabled>成功按钮</el-button>
                    <el-button type="info" disabled>信息按钮</el-button>
                    <el-button type="warning" disabled>警告按钮</el-button>
                    <el-button type="danger" disabled>危险按钮</el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button plain disabled>朴素按钮</el-button>
                    <el-button type="primary" plain disabled>主要按钮</el-button>
                    <el-button type="success" plain disabled>成功按钮</el-button>
                    <el-button type="info" plain disabled>信息按钮</el-button>
                    <el-button type="warning" plain disabled>警告按钮</el-button>
                    <el-button type="danger" plain disabled>危险按钮</el-button>
                </el-row>

                <el-button type="text">文字按钮</el-button>
                <el-button type="text" disabled>文字按钮</el-button>

                <el-row style="margin-bottom: 10px;">
                    <el-button type="primary" icon="el-icon-edit"></el-button>
                    <el-button type="primary" icon="el-icon-share"></el-button>
                    <el-button type="primary" icon="el-icon-delete"></el-button>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                        <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-button-group>
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit"></el-button>
                        <el-button type="primary" icon="el-icon-share"></el-button>
                        <el-button type="primary" icon="el-icon-delete"></el-button>
                    </el-button-group>

                </el-row>
                <el-row style="margin-bottom: 10px;">
                    <el-button>默认按钮</el-button>
                    <el-button size="medium">中等按钮</el-button>
                    <el-button size="small">小型按钮</el-button>
                    <el-button size="mini">超小按钮</el-button>
                </el-row>
                <el-row style="margin-bottom: 10px;">
                    <el-button round>默认按钮</el-button>
                    <el-button size="medium" round>中等按钮</el-button>
                    <el-button size="small" round>小型按钮</el-button>
                    <el-button size="mini" round>超小按钮</el-button>
                </el-row>

            </el-card>
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>5、Link 文字链接</h3>
                </div>

                <el-row style="margin-bottom: 10px">
                    <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
                    <el-link type="primary">主要链接</el-link>
                    <el-link type="success">成功链接</el-link>
                    <el-link type="warning">警告链接</el-link>
                    <el-link type="danger">危险链接</el-link>
                    <el-link type="info">信息链接</el-link>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-link disabled>默认链接</el-link>
                    <el-link type="primary" disabled>主要链接</el-link>
                    <el-link type="success" disabled>成功链接</el-link>
                    <el-link type="warning" disabled>警告链接</el-link>
                    <el-link type="danger" disabled>危险链接</el-link>
                    <el-link type="info" disabled>信息链接</el-link>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-link :underline="false">无下划线</el-link>
                    <el-link>有下划线</el-link>
                    <el-link icon="el-icon-edit">编辑</el-link>
                    <el-link>查看<i class="el-icon-view el-icon--right"></i></el-link>
                </el-row>

            </el-card>
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>6、Tabs 标签页</h3>
                </div>

                <el-tabs tab-position="left" style="height: 200px;">
                    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                </el-tabs>

                <p>
                    Tabs位置共有4个位置分别为：
                    <el-tag>
                        <span>top</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>right</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>bottom</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>left</span>
                    </el-tag>
                </p>
            </el-card>
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>7、弹框、对话框、通知</h3>
                </div>

                <el-row style="margin-bottom: 10px;">
                    <el-button
                            plain
                            @click="showMessage">
                        消息
                    </el-button>
                    <el-button
                            plain
                            @click="showNotify">
                        通知
                    </el-button>
                    <el-button
                            plain
                            @click="showMessageBox">
                        消息Box
                    </el-button>
                    <el-button
                            plain
                            @click="showConfirmBox">
                        消息确认Box
                    </el-button>

                    <el-popover
                            placement="top-start"
                            title="标题"
                            width="200"
                            trigger="hover"
                            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <el-button slot="reference">hover 激活</el-button>
                    </el-popover>
                </el-row>

                <el-row>
                    <el-button @click="dialogVisible = true">对话框Dialog</el-button>

                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="30%">
                        <span>这是一段信息</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                          </span>
                    </el-dialog>

                </el-row>

            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>6、其他小控件</h3>
                </div>

                <el-row style="margin-bottom: 10px">
                    <el-switch
                            :value="true"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>

                    <el-switch
                            :value="false"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>

                    <el-slider></el-slider>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-tag>标签一</el-tag>
                    <el-tag type="success">标签二</el-tag>
                    <el-tag type="info">标签三</el-tag>
                    <el-tag type="warning">标签四</el-tag>
                    <el-tag type="danger">标签五</el-tag>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-tag closable>标签一</el-tag>
                    <el-tag closable type="success">标签二</el-tag>
                    <el-tag closable type="info">标签三</el-tag>
                    <el-tag closable type="warning">标签四</el-tag>
                    <el-tag closable type="danger">标签五</el-tag>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-tag closable>默认标签</el-tag>
                    <el-tag size="medium" closable>中等标签</el-tag>
                    <el-tag size="small" closable>小型标签</el-tag>
                    <el-tag size="mini" closable>超小标签</el-tag>
                </el-row>

                <el-row style="margin-bottom: 10px;word-spacing: 30px;">
                    <el-badge :value="12" class="item">
                        <el-button size="small">评论</el-button>
                    </el-badge>
                    <el-badge :value="3" class="item">
                        <el-button size="small">回复</el-button>
                    </el-badge>
                    <el-badge :value="1" class="item" type="primary">
                        <el-button size="small">评论</el-button>
                    </el-badge>
                    <el-badge :value="2" class="item" type="warning">
                        <el-button size="small">回复</el-button>
                    </el-badge>

                    <el-badge is-dot class="item">数据查询</el-badge>
                    <el-badge is-dot class="item">
                        <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
                    </el-badge>
                </el-row>

                <el-row style="margin-bottom: 10px;word-spacing: 30px;">
                    <el-badge :value="200" :max="99" class="item">
                        <el-button size="small">评论（最大值）</el-button>
                    </el-badge>
                    <el-badge :value="100" :max="10" class="item">
                        <el-button size="small">回复（最大值）</el-button>
                    </el-badge>

                    <el-badge value="new" class="item">
                        <el-button size="small">评论</el-button>
                    </el-badge>
                    <el-badge value="hot" class="item">
                        <el-button size="small">回复</el-button>
                    </el-badge>

                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-alert
                            style="margin-bottom: 10px"
                            title="成功提示的文案"
                            type="success"
                            show-icon>
                    </el-alert>
                    <el-alert
                            style="margin-bottom: 10px"
                            title="消息提示的文案"
                            type="info"
                            show-icon>
                    </el-alert>
                    <el-alert
                            style="margin-bottom: 10px"
                            title="警告提示的文案"
                            type="warning"
                            show-icon>
                    </el-alert>
                    <el-alert
                            style="margin-bottom: 10px"
                            title="错误提示的文案"
                            type="error"
                            show-icon>
                    </el-alert>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <el-dropdown>
                        <span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown split-button type="primary">
                        默认尺寸
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item>双皮奶</el-dropdown-item>
                            <el-dropdown-item>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown size="medium" split-button type="primary">
                        中等尺寸
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item>双皮奶</el-dropdown-item>
                            <el-dropdown-item>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown size="small" split-button type="primary">
                        小型尺寸
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item>双皮奶</el-dropdown-item>
                            <el-dropdown-item>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown size="mini" split-button type="primary">
                        超小尺寸
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item>双皮奶</el-dropdown-item>
                            <el-dropdown-item>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-row>
                <el-row style="margin-bottom: 10px;">
                    <span>头上一片晴天，心中一个想念</span>
                    <el-divider content-position="left">少年包青天</el-divider>
                    <span>饿了别叫妈, 叫饿了么</span>
                    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                    <span>为了无法计算的价值</span>
                    <el-divider content-position="right">阿里云</el-divider>
                </el-row>

                <el-row style="margin-bottom: 10px;">
                    <span>雨纷纷</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>旧故里</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>草木深</span>
                </el-row>

            </el-card>

        </el-tab-pane>

        <el-tab-pane label="Ajax调用">

            <el-card class="card" style="width: 600px;margin: 20px">

                <el-button type="primary" @click="doAjax">调用AJAX</el-button>

                <el-divider></el-divider>

                <pre>new Ajax("wsys", "user", "find").post({}, function (response) {</pre>
                <pre>    if (response.errors.length > 0) {</pre>
                <pre>        nav.e(response.errors[0].message);</pre>
                <pre>    } else {</pre>
                <pre>        nav.i("Ajax调用成功!");</pre>
                <pre>    }</pre>
                <pre>}.bind(this))</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <el-upload
                        style="width: 300px;"
                        name="file"
                        class="upload-demo"
                        action="upload"
                        :http-request="handleUpload"
                        multiple
                        :limit="3"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

                <el-divider></el-divider>

                <pre>new Ajax("wsys","file","upload").post(req.file,function (response) {</pre>
                <pre>    if (response.errors.length > 0) {</pre>
                <pre>        req.onError();</pre>
                <pre>        nav.e(response.errors[0].message);</pre>
                <pre>    } else {</pre>
                <pre>        req.onSuccess();</pre>
                <pre>        nav.i("文件上传成功!");</pre>
                <pre>    }</pre>
                <pre>}.bind(this))</pre>
            </el-card>

        </el-tab-pane>

        <el-tab-pane label="消息推送">

            <el-card class="card" style="width: 600px;margin: 20px">

                <el-button type="primary" @click="doPush">开始推送</el-button>

                <el-button type="danger" @click="doUnPush">停止推送</el-button>

                <el-divider></el-divider>

                <p>var evtSource = new EventSource('http://localhost:8080/sse/1');</p>

                <p>evtSource.addEventListener('message', function (e) {</p>

                <p style="text-indent: 2em;">console.log(e.data);</p>

                <p>});</p>

            </el-card>
        </el-tab-pane>

        <el-tab-pane label="nav对象">
            <el-card class="card" style="width: 600px;margin: 20px">
                <el-button type="primary" size="mini" @click="this.window.nav.i('消息')">普通消息</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.e('错误')">错误消息</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.s('成功')">成功消息</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.w('警告')">警告消息</el-button>

                <el-divider></el-divider>

                <pre> nav.i('消息')</pre>
                <pre> nav.e('错误')</pre>
                <pre> nav.s('成功')</pre>
                <pre> nav.w('警告')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <el-button type="primary" size="mini" @click="this.window.nav.tipShow('加载中')">加载提示框</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.tipClose()">关闭提示框</el-button>

                <el-divider></el-divider>

                <pre>nav.tipShow('加载中')</pre>
                <pre>nav.tipClose()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <el-button type="primary" size="mini" @click="this.window.nav.barShow()">请求进度条</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.barFinish()">成功</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.barError()">失败</el-button>
                <br>1、最终调用index对象的barStart(),barFinish(),barError();

                <el-divider></el-divider>

                <pre>nav.barShow()</pre>
                <pre>nav.barFinish()</pre>
                <pre>nav.barError()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                简单对话框(确认)
                <el-button type="primary" size="mini" @click="this.window.nav.boxYes('提示','你好!')">示例</el-button>
                <br>
                简单对话框(确认取消)
                <el-button type="primary" size="mini" @click="this.window.nav.boxYesNo('提示','你好!')">示例</el-button>
                <br>
                简单对话框(输入)
                <el-button type="primary" size="mini" @click="this.window.nav.boxInput('提示','你好!')">示例</el-button>
                <br>
                简单对话框(HTML)
                <el-button type="primary" size="mini" @click="this.window.nav.boxHtml('提示','<i>你好!</i>')">示例</el-button>

                <el-divider></el-divider>

                <pre>nav.boxYes(title, message, callback)</pre>
                <pre>nav.boxYesNo(title, message, callback)</pre>
                <pre>nav.boxInput(title, message, callback)</pre>
                <pre>nav.boxHtml(title, htmlMessage, callback)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                切换网页全屏，取消网页全屏
                <el-button type="primary" size="mini" @click="this.window.nav.screenFull()">全屏</el-button>
                <el-button type="primary" size="mini" @click="this.window.nav.screenNotFull()">取消全屏</el-button>

                <el-divider></el-divider>

                <pre>nav.screenFull()</pre>
                <pre>nav.screenNotFull()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                设置Cookie

                <el-divider></el-divider>

                <pre>nav.setCookie(name, value, expiretime)</pre>
                <pre>nav.getCookie(name)</pre>
                <pre>nav.clearCookie(name)</pre>
            </el-card>
        </el-tab-pane>

        <el-tab-pane label="index对象">
            <el-card class="card" style="width: 600px;margin: 20px">
                回到或打开HOME页

                <el-divider></el-divider>

                <pre>index.onHome()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                请求进度条

                <el-divider></el-divider>

                <pre>index.barStart()</pre>
                <pre>index.barFinish()</pre>
                <pre>index.barError()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                左侧菜单收缩切换方法

                <el-divider></el-divider>

                <pre>index.collapseSwitch()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                网页全屏切换方法
                <br>1、最终调用nav对象的nav.screenFull()和nav.screenNotFull()

                <el-divider></el-divider>

                <pre>index.switchFullScreen()</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                添加新Tab

                <el-divider></el-divider>

                <pre>var tab = {</pre>
                <pre>    title: '首页',</pre>
                <pre>    name: 'home',</pre>
                <pre>    url: '/home.htm'</pre>
                <pre>}</pre>
                <pre>index.addTab(tab)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                移除Tab

                <el-divider></el-divider>

                <pre>index.removeTab(tabName)</pre>
            </el-card>
        </el-tab-pane>

        <el-tab-pane label="JS BASE工具">
            所有js相关基本方法皆以打包进lib.min.js文件

            <el-card class="card" style="width: 600px;margin: 20px">
                获取url参数

                <el-divider></el-divider>

                <pre>window.location.getParam('id')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                打开游览器新标签

                <el-divider></el-divider>

                <pre>window.location.open('www.baidu.com')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                日期格式化

                <el-divider></el-divider>

                <pre>new Date().format('yyyy-MM-dd hh:mm:ss')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组移除

                <el-divider></el-divider>

                <pre>var arr = ['A', 'B'];</pre>
                <pre>arr.remove('A')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组替换

                <el-divider></el-divider>

                <pre>var arr = ['A', 'B'];</pre>
                <pre>arr.replace('A', 'C')</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组位置调整

                <el-divider></el-divider>

                <pre>var arr = ['A', 'B'];</pre>
                <pre>arr.exchange(0, 1)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组异步循环

                <el-divider></el-divider>

                <pre>var arr = ['A', 'B'];</pre>
                <pre>arr.forAsync(function (item, next) {</pre>
                <pre>    setTimeout(function () {</pre>
                <pre>        console.log(item);</pre>
                <pre>        next();</pre>
                <pre>    }, 1000)</pre>
                <pre>})</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组异步循环(完成通知)

                <el-divider></el-divider>

                <pre>var arr = ['A', 'B'];</pre>
                <pre>arr.forAsync(function (item, next) {</pre>
                <pre>    setTimeout(function () {</pre>
                <pre>        console.log(item);</pre>
                <pre>        next();</pre>
                <pre>    }, 1000)</pre>
                <pre>}, function () {</pre>
                <pre>    nav.i("异步循环完成.");</pre>
                <pre>})</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组递归循环
                <br>1、forTree第二参数为子类属性，默认为[children]

                <el-divider></el-divider>

                <pre>var arr = [{</pre>
                <pre>    name: 'A',</pre>
                <pre>    children: [</pre>
                <pre>        {name: 'AA'},</pre>
                <pre>        {name: 'AB'},</pre>
                <pre>    ]</pre>
                <pre>}]</pre>
                <pre>arr.forTree(function (item) {</pre>
                <pre>    console.log(item.name)</pre>
                <pre>})</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                数组递归循环(处理函数可以知道当前循环深度)

                <el-divider></el-divider>

                <pre>var arr = [{</pre>
                <pre>    name: 'A',</pre>
                <pre>    children: [</pre>
                <pre>        {name: 'AA'},</pre>
                <pre>        {name: 'AB'},</pre>
                <pre>    ]</pre>
                <pre>}]</pre>
                <pre>arr.forTreeDepth(function (item, depth) {</pre>
                <pre>    console.log(item.name);</pre>
                <pre>    console.log(depth);//[0],[0, 0],[0, 1]</pre>
                <pre>})</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                自定义Map对象
                <br>1、放置对象 map.put(key, value)
                <br>2、获取对象 map.get(key)
                <br>3、获取键集合 map.getKeys()
                <br>4、获取对象集合 map.getValues()
                <br>5、移除对象 map.remove(key)
                <br>6、返回大小 map.size()
                <br>7、判断是否为空 map.isEmpty()
                <br>8、清空 map.clear()
                <br>9、是否包含键 map.containsKey(key)
                <br>10、是否包含值 map.containsValue(value)
                <br>11、循环 map.forEach(callBack) // 函数接收两个参数(key, value)
                <br>12、异步循环 map.forAsync(callBack, finish) // 函数接收两个参数(key, value)，完成函数(可选)

                <el-divider></el-divider>

                <pre>var map = new Map();</pre>
                <pre>map.put("name", "hello world!");</pre>
                <pre>console.log(map.get("name"));</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                文件选择 window.utils.selectFile(cb)

                <el-divider></el-divider>

                <pre>window.utils.selectFile(function (files) {</pre>
                <pre>    new Ajax("wsys","file","upload").post(files[0],function (response) {</pre>
                <pre>        if (response.errors.length > 0) {</pre>
                <pre>            nav.e(response.errors[0].message);</pre>
                <pre>        } else {</pre>
                <pre>            nav.i("文件上传成功!");</pre>
                <pre>        }</pre>
                <pre>    })</pre>
                <pre>})</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                Blob二进制文件异步下载

                <el-divider></el-divider>

                <pre>window.utils.blobtoDown(name, blob)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                base64转为String

                <el-divider></el-divider>

                <pre>window.utils.base64toString(base64)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                String转为base64

                <el-divider></el-divider>

                <pre>window.utils.stringtoBase64(str)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                base64转为字节数组

                <el-divider></el-divider>

                <pre>window.utils.base64toBytes(base64)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                base64字符转Blob对象

                <el-divider></el-divider>

                <pre>window.utils.base64toBlob(base64)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                动态加载Js或css文件

                <el-divider></el-divider>

                <pre>window.utils.loadJsCss(url)</pre>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                深拷贝对象

                <el-divider></el-divider>

                <pre>window.utils.copy(obj)</pre>
            </el-card>
        </el-tab-pane>

        <el-tab-pane label="常见问题">
            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>1、页面初始化前闪现源代码</h3>
                </div>

                <p>${'<style  type="text/css">'?html}</p>

                <p>${'[v-cloak] {'?html}</p>

                <p class="text-indent">${'display: none;'?html}</p>

                <p>${'}'?html}</p>

                <p>${'</style>'?html}</p>


                <p>${'<div id="app" v-cloak>'?html}</p>

                <p>${'...'?html}</p>

                <p>${'</div>'?html}</p>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>2、为什么Long类型返回json字符串变为String</h3>
                </div>

                <p>因为Long可支持的长度比JavaScript中Number支持的位数更多，所以当Long数值很大时转为Json再转为Number就会丢失精度，造成难以发现的Bug，所以本系统默认处理了该问题。</p>
            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>3、Date类型格式化问题</h3>
                </div>

                <p>默认启用全局Date格式化
                    <el-tag>yyyy-MM-dd HH:mm:ss</el-tag>
                    ，需要关闭请在
                    <el-tag>application-*</el-tag>
                    中关闭。
                </p>

                <p>对于个别返回结果的Date格式化可以通过注解方式
                    <el-tag>@JsonFormat(pattern = "yyyy-MM-dd")</el-tag>
                </p>

            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>4、权限问题</h3>
                </div>

                <p>1、本系统启用自定义Token来控制权限，任何访问都会有一个全局Token,任何一处都可以通过
                    <el-tag>LocalData.getToken()</el-tag>
                    来获取
                    当前访问对象的Token。其中Token充当着访问对象的通行证，其中包含访问对象的
                    <el-tag>用户ID</el-tag>
                    、
                    <el-tag>用户名</el-tag>
                    、
                    <el-tag>可访问资源</el-tag>
                    等信息。
                </p>

                <p>2、对于未登录对象会提供临时(访客)
                    <el-tag>LocalData.getTempToken()</el-tag>
                    (有限的权限)来提供访问系统。
                </p>

                <p>3、如果系统存在Task等定时任务时，是不存在访问对象，通过
                    <el-tag>LocalData.getSystemToken()</el-tag>
                    来获取系统层的Token来操作系统。
                </p>

            </el-card>

            <el-card class="card" style="width: 600px;margin: 20px">
                <div slot="header">
                    <h3>5、Token配置</h3>
                </div>

                <p>Springboot环境配置文件<b>application-*</b>中配置了系统中需要验证权限和不需要验证的url。而需要验证权限的URl会在
                    <el-tag>SecurityConfig.getAuthorization()</el-tag>
                    方法中通过Parameter或Cookies中获取当前访问对象的登录信息，从而为当前访问对象组装Token对象。

                </p>

            </el-card>
        </el-tab-pane>
    </el-tabs>
</div>
<style>
    #app {
        padding: 20px;
        height: 100%;
    }

</style>
<script>
    var app = new Vue({
        mixins: [mixinForMgr],
        el: "#app",
        data: {
            fileList: [],
            form: {
                field1: '',
                field2: '',
                field3: '',
                field4: '',
                field5: false,
                field6: [],
                field7: '',
                field8: '',
                field9: [],
                field10: '自定义验证示例'
            },
            address: [{
                value: '10000',
                label: '上海市',
                children: [{
                    value: '11000',
                    label: '静安区',
                    children: [{
                        value: '11100',
                        label: '南京西路',
                    }]
                }]
            }
            ],
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市'
            }],
            multipleSelection: [],

            rules: {
                field1: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                field2: [
                    {required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                field3: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                field4: [
                    {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                ],
                field6: [
                    {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                ],
                field7: [
                    {required: true, message: '请选择活动资源', trigger: 'change'}
                ],
                field8: [
                    {required: true, message: '请填写购买数量', trigger: 'blur'}
                ],
                field9: [
                    {required: true, message: '请填写地址', trigger: 'blur'}
                ],
                field10: [{
                    validator: function (rule, value, callback) {
                        if (value === '') {
                            callback(new Error('请填写活动形式'));
                        } else if (value.length < 10) {
                            callback(new Error('内容太短!'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur'
                }]
            },

            dialogVisible: false
        },
        methods: {
            doAjax: function () {
                new Ajax("wsys", "user", "find").post({}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        nav.i("Ajax调用成功!");
                    }
                }.bind(this))
            },
            doPush: function () {
                if (window.EventSource) {
                    window.evtSource = new EventSource('http://localhost:8080' + nav.context + '/sse/1');
                    window.evtSource.addEventListener('message', function (e) {
                        this.$notify.info({
                            title: '消息',
                            message: "收到一条新的消息:" + e.data
                        });
                    }.bind(this));
                }
            },
            doUnPush: function () {
                if (typeof window.evtSource !== "undefined") {
                    window.evtSource.close();
                }
            },
            handleUpload: function (req) {
                new Ajax("wsys","file","upload").post(req.file,function (response) {
                    if (response.errors.length > 0) {
                        req.onError();
                        nav.e(response.errors[0].message);
                    } else {
                        req.onSuccess();
                        nav.i("文件上传成功!");
                    }
                }.bind(this))
            },
            submitForm: function (formName) {
                this.$refs[formName].validate(function (valid) {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                }.bind(this));
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            handleEdit: function (index, row) {
                nav.i("编辑");
            },

            showMessage: function () {
                setTimeout(function () {
                    this.$message('这是一条消息提示');
                }.bind(this), 100)

                setTimeout(function () {
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                }.bind(this), 200)

                setTimeout(function () {
                    this.$message({
                        message: '警告哦，这是一条警告消息',
                        type: 'warning'
                    });
                }.bind(this), 300)

                setTimeout(function () {

                    this.$message.error('错了哦，这是一条错误消息');
                }.bind(this), 400)
            },
            showNotify: function () {
                setTimeout(function () {
                    this.$notify({
                        title: '成功',
                        message: '这是一条消息的提示消息',
                        type: 'success'
                    });
                }.bind(this), 100)

                setTimeout(function () {
                    this.$notify({
                        title: '警告',
                        message: '这是一条警告的提示消息',
                        type: 'warning'
                    });
                }.bind(this), 200)

                setTimeout(function () {
                    this.$notify.info({
                        title: '消息',
                        message: '这是一条消息的提示消息'
                    });
                }.bind(this), 300)

                setTimeout(function () {
                    this.$notify.error({
                        title: '错误',
                        message: '这是一条错误的提示消息'
                    });
                }.bind(this), 400)
            },
            showMessageBox: function () {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: function (action) {
                        console.log(action)
                    }
                });
            },
            showConfirmBox: function () {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }.bind(this)).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                }.bind(this));
            },
        },
        created: function () {
        },
        mounted: function () {
        },
        watch: {}
    })
</script>
